<template>
    <div class="articleList">
        <el-row v-if="tagId">
            <el-card shadow="hover" class="search-box" >
                <i class="el-icon-price-tag"></i>
                <span>标签-{{ tagData[tagId]?tagData[tagId]:'不存在' }}</span>
            </el-card>
        </el-row>

        <el-row>
            <el-card shadow="hover" class="search-box" @click.native="dialogVisible=true">
                <i class="el-icon-search"></i>
                <span>搜索{{ searchValue }}</span>
            </el-card>
        </el-row>

       <template v-if="articleListData.length>0">
           <el-row
               v-for="(item,index) in articleListData"
               :key="item.article_id"
           >
               <el-card
                   shadow="hover"
                   class="articleBox"
                   :style="{animationDelay:index*0.2+'s'}"
                   @click.native="goDetail(item.article_id)"
               >
                   <p class="articleTitle">{{ item.title }}</p>

                   <div class="articleList">
                       <div class="subTitle flex-row ite-c jus-c">
                           <!--                        <el-avatar :src="item.author_image" size="medium"></el-avatar>-->
                           <!--                        <span class="author">{{ item.author }}</span>-->
<!--                           <i class="el-icon-alarm-clock"></i>-->
                           <span class="createTime">创建时间： {{ item.create_time }}</span>
                           <span class="type">分类：</span>
                           <el-tag
                               size="mini"
                               effect="dark"
                               style="color:#fff;"
                               :color="item.tag_color"
                           >{{ item.tag_name }}</el-tag>
                       </div>
                       <pre class="digest" v-text="item.digest"></pre>
                   </div>
               </el-card>
           </el-row>
       </template>

        <el-row v-else>
            <el-card shadow="hover" class="search-box" >
                <i class="el-icon-document"></i>
                <span>内容不存在</span>
            </el-card>
        </el-row>

        <div class="page-box">
            <el-pagination
                background
                :pager-count="5"
                layout="total, pager"
                :total="taotal"
                :current-page="page"
                :page-size="pagesize"
                @current-change="changePage"
                @prev-click="changePage"
                @next-click="changePage"
            ></el-pagination>
        </div>

        <el-dialog
            :visible.sync="dialogVisible"
            title="搜索"
            width="70%"
        >
            <el-input
                v-model="keyword"
                ref="search"
                @keyup.enter.native="search"
                prefix-icon="el-icon-search"
                placeholder="请输入标题 / 作者 / 简介"
            ></el-input>
        </el-dialog>
    </div>
</template>

<script>
    import { articleList } from '@/api/article'
    import { mapGetters } from "vuex";

    export default {
        name: "articleList",
        data() {
            return {
                hotArticleList: [],
                articleListData: [],
                taotal: 0,
                pagesize:5,
                page: 1,
                tagId: 0,
                keyword:'',
                dialogVisible:false,
            }
        },
        mounted(){
            this.initData()
        },
        watch: {
            $route(newValue, oldValue) {
                this.initData()
            }
        },
        computed: {
            ...mapGetters({
                tagData:'article/getTagData',
            }),
            searchValue() {
                if(!this.keyword)return '';
                return `-${this.keyword}`;
            }
        },
        methods: {
            // 初始化搜索
            initData() {
                let route = this.$route
                this.page = Number(route.params.page || 1)
                this.tagId = Number(route.params.tagId) || 0
                this.keyword = route.query.keyword
                this.dialogVisible = false
                this.getArticleList()
            },
            // 搜索
            search(){
                this.$router.push({
                    path:`/article/${this.tagId}/${this.page}`,
                    query:{
                        keyword:this.keyword
                    }
                })
            },
            // 页数修改
            changePage(pagenum) {
                this.page = pagenum
                this.$router.push(`/article/${this.tagId}/${this.page}`)
            },
            // 获取文章列表
            getArticleList() {
                let params = {
                    pagesize: this.pagesize,
                    page: this.page,
                    keyword: this.keyword,
                    tag_id: this.tagId,
                }

                articleList(params)
                    .then(res => {
                        // console.log(res)
                        if (Number(res.code) === 0) {
                            this.articleListData = res.data
                            this.page = res.page
                            this.taotal = res.count
                        } else {
                            this.$Alert({ message: res.msg,type:'error' })
                        }
                    })
            },
            // 前往详情
            goDetail(articleId) {
                this.$router.push(`/detail/${articleId}`)
            },
        },
    }
</script>

<style scoped lang="less">
    .el-row + .el-row{
        margin-top: 20px;
    }

    .username{
        display: inline-block;
        margin-left: 8px;
        color:#333;

        &:hover{
            color:#409EFF;
        }
    }

    .articleTitle{
        color: #5c5451;
        font-size: 28px;
        text-align: center;
    }

    @keyframes toShow {
        from {
            transform: scale(0);
        }
        to{
            opacity: 1;
            transform: scale(1);
        }
    }

    .articleBox{
        cursor: pointer;
        opacity: 0;
        animation: toShow 0.5s;
        animation-fill-mode:forwards;

        .articleList{
            margin-top: 10px;

            .subTitle{
                color:#666;

                .createTime{
                    margin-left: 4px;
                }
            }

            span + span{
                margin-left: 10px;
            }

            .digest{
                margin-top: 20px;
                color:#4e4e4e;
                line-height: 24px;
            }
        }
    }

    .page-box{
        width: 100%;
        background: #fff;
        margin-top: 20px;
        padding: 15px 0;
        text-align: center;
    }
</style>
